<template>
    <div class="goods">
        <!--1、搜索区域  -->
        <div class="header">
            <el-input v-model="keyword" placeholder="请输入内容"></el-input>
            <el-button type="primary">搜索</el-button>
            <el-button type="primary">添加</el-button>
            <el-button type="primary">弹窗添加</el-button>
        </div>
        <!--2、表格 -->
        <div class="wrapper">
            <el-table :data="tableData" style="width: 100%" border>
                <el-table-column type="selection" width="55">
                </el-table-column>
                <el-table-column prop="id" label="商品ID" show-overflow-tooltip width="100">
                </el-table-column>
                <el-table-column prop="title" label="商品名称" show-overflow-tooltip width="100">
                </el-table-column>
                <el-table-column prop="price" width="100" show-overflow-tooltip label="商品价格">
                </el-table-column>
                <el-table-column prop="num" width="100" show-overflow-tooltip label="商品数量">
                </el-table-column>
                <el-table-column prop="category" width="100" show-overflow-tooltip label="规格类目">
                </el-table-column>
                <el-table-column show-overflow-tooltip label="商品图片">
                    <template slot-scope="scope">
                        <!-- <img :src="scope.row.image | setImg" alt=""> -->
                        <span>{{scope.row.image | setImg}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="sellPoint" show-overflow-tooltip label="商品卖点">
                </el-table-column>
                <el-table-column show-overflow-tooltip label="商品描述">
                    <template slot-scope="scope">
                        <span>{{scope.row.descs | setHtml}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="address" width="200" label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!--3、按钮区域 -->
        <!--4、分页 -->
        <Mypagination :total="total" :pageSize="pageSize" :currentPage="currentPage" @changePageNum="getPageNum">
        </Mypagination>
    </div>
</template>

<script>
    // import { getGoodsList } from "../../api/index.js"
    import Mypagination from "../../components/Mypagination.vue"
    export default {
        components: {
            Mypagination
        },
        data() {
            return {
                keyword: "",
                tableData: [],
                total: 0,
                pageSize: 0,
                currentPage: 0
            }
        },
        created() {
            this.getGoodsList(1);
        },
        //过滤器 
        filters: {
            setHtml(val) {
                if (!val && val !== null) {
                    return
                }
                // console.log(val);
                // 使用DOMParser将HTML字符串解析为DOM对象
                const parser = new DOMParser();
                const htmlDocument = parser.parseFromString(val, "text/html");
                // 使用DOM操作方法访问和操作HTML内容
                const paragraph = htmlDocument.querySelector("p");
                const textContent = paragraph.textContent;
                // console.log(textContent);
                if (!textContent && textContent !== null) {
                    return
                }
                return textContent;
            },
            setImg(val) {
                const newStr = val.replace(/^\[|\]$/g, '').replace(/^"|"$/g, ''); // 去除两边的方括号
                // console.log(newStr);
                return newStr;
            }
        },
        methods: {
            getPageNum(page) {
                // console.log(page);
                this.getGoodsList(page)

            },
            // 第一种单页面导入写法
           /*  async getGoodsList(pageNum) {
                try {
                    let res = await getGoodsList({ page: pageNum })
                    console.log(res);
                    this.total = res.total;
                    this.pageSize = res.pageSize;
                    this.currentPage = res.currentPage;
                    this.tableData = res.data
                } catch (error) {
                    // console.log(error);
                }
            }, */
            //第二种全局配置写法 
            async getGoodsList(pageNum) {
                try {
                    let res = await this.$http.getGoodsList({ page: pageNum })
                    console.log(res);
                    this.total = res.total;
                    this.pageSize = res.pageSize;
                    this.currentPage = res.currentPage;
                    this.tableData = res.data
                } catch (error) {
                    // console.log(error);
                }
            },
            handleEdit(index, row) {
                console.log(index, row);
            },
            handleDelete(index, row) {
                console.log(index, row);
            }
        }
    }
</script>
<style lang="less" scoped>
    .goods {
        padding: 20px;

        .header {
            display: flex;

            button {
                margin-left: 20px;
            }
        }
    }

    .warpper {
        padding: 20px 0;
    }
</style>